// 申请过户
import { Form, Row, Col, Input, DatePicker, } from 'antd';
// import { uploadFileUrl } from '@/service/common/upload';
import React,{ useEffect, useState } from 'react';
import moment from 'moment';
import styles from './index.less';
import cardStyles from '../index.less';
import DeductionExpenses from '../returnCar/deductionExpenses'

const formLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 4 },
  },
  wrapperCol: {
    xs: { span: 24, offset: 0 },
    sm: { span: 12, offset: 0 },
  },
};
const time = moment().locale("zh-cn").format("YYYY-MM-DD HH:mm:ss")


function TransferOfNames(props:any) {
  const { info } = props
  // 获取路由中订单编号
  const [orderIds,setOrderIds] = useState('')
  const [datas,setDatas] = useState<any>()
  const routerName = () => {
      setOrderIds(info?.id)
  }
  const [form] = Form.useForm<any>()
  useEffect(()=>{
    routerName()
  },[orderIds])
  // 时间改变
  const dateChange =(value:any)=>{
    const data ={...datas}
    data.estimatedTime= moment(value).format('YYYY-MM-DD HH:mm:ss')
    setDatas(data)
  }
  // 备注改变
  const remakeChange = (value:any)=>{
    const data ={...datas}
    data.applyRemark=value.target.value
    setDatas(data)
  }
  return (
    <div className={styles.page} id='transfer'>
      <div className={cardStyles.card}>
        <p className={cardStyles.title}>申请过户</p>
        <div className={styles.form}>
          <Form
            form={form}
            name="basic"
            onFinish={() => {}}
            onFinishFailed={() => {}}
            autoComplete="off"
            {...formLayout}
            wrapperCol={{ flex: 1 }}
          >
            <Row gutter={24} className={cardStyles.rows}>
              <Col span={24}>
                <Form.Item
                  name="estimatedTime"
                  label="预计过户时间"
                  rules={[{ required: true, message: '请选择过户时间' }]}
                >
                  <DatePicker
                    placeholder="请选择过户时间"
                    format="YYYY-MM-DD"
                    allowClear
                    className={styles.customWidth}
                    onChange={(e:any)=>dateChange(e)}
                  />
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={24} className={cardStyles.rows}>
              <Col span={24}>
                <Form.Item name="applyRemark" label="备注">
                  <Input
                    maxLength={200}
                    placeholder="请填写过户备注，不超过200个字符"
                    allowClear
                    style={{ width: '600px' }}
                    onChange={(e:any)=>remakeChange(e)}
                  />
                </Form.Item>
              </Col>
            </Row>
          </Form>
        </div>
      </div>
      <DeductionExpenses info = {info?.id} orderId = {info?.orderNo}  title='过户结算信息' btnTitle='批量导入过户费用项' datas={datas} time = {time} />
    </div>
  );
}

export default TransferOfNames;
